Hansen

About

Hansen

HTML5 Multipurpose Template

Hansen is Responsible HTML5 Template built with Bootstrap 3 framework.
It is easily customizable, the choice is yours.

Structure

Files Structure

Once downloaded, unzip the compressed folder to see the structure of the Hansen. You'll see next structure:

html template/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.min.css
    │   ├── entypo.css
    │   ├── jquery.mb.YTPlayer.min.css
    │   ├── magnific-popup.css
    │   ├── main.css
    │   ├── slick.css
    │   └── vegas.min.css
    ├── fonts/
    │   ├── entypo.eot
    │   ├── entypo.svg
    │   ├── entypo.ttf
    │   └── entypo.woff
    ├── img/
    │   ├── clients/
    │       └── *images
    │   ├── parallax/
    │       └── *images
    │   ├── screens/
    │       └── *images
    │   ├── thumbs/
    │       └── *images
    │   └── *images
    ├── js/
    │   └── vendor/
    │       └── *for detailed list see js section
    │   ├── bootstrap.js
    │   ├── bootstrap.min.js
    │   ├── comingsoon.js
    │   ├── contact.js
    │   ├── main.js
    │   └── mymap.js
    ├── php/
    │   ├── phpmailer/
    │   ├── contact-form.php
    │   └── newsletter.php
    ├── 404.html
    ├── about.html
    ├── comingsoon.html
    ├── contact.html
    ├── index.html
    ├── index-slider.html
    ├── index-video.html
    └── shortcodes.html

Html Structure

This theme is a responsive layout based on Bootstrap 3. All of the information within the main content area is nested within a body tag. The general template structure is the same throughout the template.

General structure: Navbar - Header - Main - Footer

layout

Simple HTML Boilerplate (index.html):

<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>Hansen</title> ... <!-- FONTS --> ... <!-- CSS --> ... <!-- Favicon --> ... <script src="js/vendor/modernizr.js"></script> </head> <body> <!-- Navbar --> <nav class="navbar navbar-burger navbar-fixed-top is-transparent" role="navigation"> ... </nav> <!-- Header --> <header class="header hero flex flex-middle flex-center" role="banner"> ... </header> <!-- Content --> <main class="main" role="main"> <!-- Clients --> <section class="section clients no-padding text-center"> ... </section> <!-- Features --> <section class="section text-center"> ... </section> ... </main> <!-- Footer --> <footer class="footer" role="contentinfo"> ... </footer> <!-- Scripts –––––––––––––––––––––––––––––––––––––––––––––––––– --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"></script>')</script> <script src="js/bootstrap.min.js"></script> <script src="js/vendor/jquery.appear.js"></script> ... ... <script src="js/vendor/jquery.magnific-popup.min.js"></script> <script src="js/main.js"></script> </body> </html>

CSS Structure

All css files are located in css folder:

main.css

This file includes all general variables used in this template. If you want to change style and colors of the template you should start from this file.

/* Table of Contents
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
 * Default
    * Titles
    * Flexbox
 * Buttons
    * Button Black
    * Button Badge / Get App
    * Buttons pair
 * Cards
 * Highlighting
 * Preloader
 * Social List
 * Navbar
    * Overlay Menu
 * Header
    * Slider Bg and Video Bg
 * Main
 * Clients
 * Features
 * Counters
 * Features / Left Image / Right Image
 * Features / Mockup
 * Video Section
 * Gallery / Screens
 * Pricing Tables
 * Testimonials
 * Call To Action
 * Footer
 * Collapse
 * Tabs
 * Progress Bars
 * Magnific Popup
 * Page: About / about.html
 * Page: Contact / contact.html
 * Page: Comming Soon / commingsoon.html
 * Page: 404 / 404.html
 */

Example code:

    	
    /* Header
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .header {
      position: relative;
      width: 100%;
      height: auto;
      min-height: 300px;
      padding: 2em 0;
      text-align: left;
      color: #393a3a;
      background: none repeat scroll center center #ffffff;
    }

bootstrap.css, bootstrap.min.css

Bootstrap 3 Framework base stylesheets. Includes all components and elements, typography, lists, buttons, button groups, navigations, navbars, forms, labels, pricing tables and much more. This stylesheet must always be included! We recommend minified version bootstrap.min.css for use. For development you can use bootstrap.css.

This template used also generated style. Use Bootstrap Customiser and insert our json file - included in pack - and make changes if you need. With Customizer you can customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.

Javascript

All Javascript files are located in js folder.

Warning: If you create a new page or you are adding components to an existing site!

If you use a form (contact form - Contact Page and Coming Soon Page), make sure you have inserted:

<script src="js/vendor/jquery.validate.min.js"></script> <script src="js/contact.js"></script>

If you use Google Map (Contact Page), make sure you have inserted:

<!-- GMap3--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="js/vendor/gmap3.min.js"></script> <script src="js/mymap.js"></script>

Installation

Getting the Template Online

Warning! This is not a Wordpress template. Running in Wordpress CMS will have no effect.

This is HTML5 template, you do not need create a database. You simply upload to the server.

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.

  2. The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, js, fonts, and images.

  3. Start your FTP client (Total Commander or FileZilla) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

php Contact Form and Twitter Feed working only in server environment with installed php, not localy.
You must load your content on server.

Customization

Layout Settings

Select your layout - Static or Slider Background or Video Background. Insert your content, write your text, load your photos and images. Compress the size of images and photos. Demo template uses high resolution images, but for normal use it is not appropriate. High-res photos = slow website loading.

Layouts:

If you use a slider or video layout, rename index-slider.html (index-video.html) to index.html

Layout with Slider Background

Slider Background layout includes a images slideshow in the Header.

Make sure that you have included vegas.min.css and vegas.min.js
Body must be of class .slider-bg: <body class="slider-bg">

How to add images:

Open file main.js and insert names of your image files: src: "yourimage.jpg".

// ----------------------------
// Layout with slider background
// Hero bg images
// ----------------------------
$(document).ready(function () {
    "use strict";
    if ($("body").hasClass("slider-bg")) {
        $(".hero").vegas({
            transition: "blur",
            delay: 8000,
            color: "#D98880",
            slides: [
               { src: "img/bg01.jpg" },
               { src: "img/bg02.jpg", transition: 'swirlLeft' },
               { src: "img/bg03.jpg", transition: 'flash' }
            ]
        });
        $(".vegas-wrapper").addClass("flex flex-middle");
        $(window).resize(function () {
            var wHeight = $(window).height();
            $(".hero").css("height", wHeight);
        });
    }
});

You can use various options: transitions, animations, delay between slides etc. For further documentation and setting information, see Vegas Background.

Layout with Video Background

This layout includes a Youtube video in Header.

Make sure that you have included jquery.mb.YTPlayer.min.css and jquery.mb.YTPlayer.min.js
Body must be of class .video-bg: <body class="video-bg">

How to change video:

Open file index-video.html and insert link to Youtube video: videoURL:' link to Youtube video ',.

<!-- Header --> <header class="header hero flex flex-middle flex-center" role="banner"> <a id="bgndVideo" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=lMJXxhRFO1k', containment:'.hero', autoPlay:true, mute:true, startAt:0, printUrl:false, showControls:false, opacity:1, quality: 'highres'}"> </a><!-- Video / See Documentation --> <div class="container"> <div class="row"> ....... </div> </div> </header>

To retrive the video from YouTube you can use any of the following string (example):

For further documentation and setting information, see jquery.mb.YTPlayer.

Fonts

Google Fonts

We use two free Google fonts: Dosis and Lato

Icons

Icon font for our template is Entypo. This is 411 carefully crafted premium pictograms.

Basic structure: <i class="icon icon-****"></i>

You can place Entypo icons just about anywhere with the i tag. You can also use other techniques, with span or a, but i tag is the best choice.

<i class="icon icon-leaf"></i>

Replace icon name, example icon-leaf, with the actual icon name you wish to display, example icon-home.

Section Counter

As you can see, each section has a number in the title.

section-title

Everything works automatically. Inside the main content, between main tags, use class .section-title for h tags, example <h3 class="section-title">

How does it work? CSS Counters provide us with a way to apply automatic numbering using CSS. See settings for classes .section-title (line 171) and .main (line 774) in main.css file.

.section-title::before {
    content: counter(my-counter, decimal-leading-zero);
    display: block;
    position: absolute;
    ......
}
....
.main {
    position: relative;
    .width100heightauto ();
    padding: 0;
    counter-reset: my-counter;
}

Learn more about CSS Counters.

Counters

Setting the counters make directly in HTML code. Open index.html and follow the example below:

<!-- Fun Facts / Counters --> <section class="section counters"> <div class="container"> <div class="row"> <div class="col-sm-4 col-md-4"> <div class="numbers"> <span class="number" data-from="0" data-to="987" data-speed="5000" data-refresh-interval="50"></span> <span class="number-info">Creative Ideas</span> </div> </div> <div class="col-sm-4 col-md-4"> <div class="numbers"> <span class="number" data-from="0" data-to="218" data-speed="5000" data-refresh-interval="50"></span> <span class="number-info">Projects Designed</span> </div> </div> <div class="col-sm-4 col-md-4"> <div class="numbers"> <span class="number" data-from="0" data-to="1356" data-speed="5000" data-refresh-interval="50"></span> <span class="number-info">Happy Customers</span> </div> </div> </div> </div> </section>

Change number value data-to="number"

For further documentation and setting information, see jQuery countTo.

Parallax

parallax.js is Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

<!-- Parallax Scene --> <article class="scene-container"> <ul id="scene" class="scene"> <li class="layer" data-depth="0.50"> <img src="img/parallax/screen1.png" alt="screen" /> </li> <li class="layer" data-depth="0.40"> <img src="img/parallax/screen2.png" alt="screen" /> </li> <li class="layer" data-depth="0.30"> <img src="img/parallax/screen3.png" alt="screen" /> </li> <li class="layer" data-depth="0.40"> <img src="img/parallax/screen4.png" alt="screen" /> </li> <li class="layer" data-depth="0.50"> <img src="img/parallax/screen5.png" alt="screen" /> </li> <li class="layer" data-depth="0.40"> <img src="img/parallax/screen6.png" alt="screen" /> </li> <li class="layer" data-depth="0.60"> <img src="img/parallax/screen7.png" alt="screen" /> </li> <li class="layer" data-depth="0.50"> <img src="img/parallax/screen8.png" alt="screen" /> </li> <li class="layer" data-depth="0.60"> <img src="img/parallax/screen9.png" alt="screen" /> </li> </ul> </article>

For further documentation and setting information, see parallax.js.

How to create layers:

parallax

Open file mockup.psd in Photoshop. Insert your content, use Smart Objects. Then export - visible only 1 layer, all another layers are hidden - Save for Web and Devices - each layer as 24bit png image with transparent background.

Now you have 9 images. Simply save them to a folder img or create new folder, example img/parallax (see demo).

What to do if you do not need parallax? Alternative without parallax:

If you do not use the parallax, simply omit the entire article .scene-container use an image or other element. Example:

<!-- Gallery / Parallax Scene --> <section class="section text-center"> <div class="container"> <div class="row"> <div class="col-md-12"> <hgroup class="title-group"> <h3 class="section-title">Awesome Screens</h3> <h5 class="subtitle">It is not just a simple app is a masterpiece</h5> </hgroup> </div> </div> <div class="row"> <div class="col-md-12"> <!-- Parallax Scene - Deleted and we use image--> <img src="img/yourimage.jpg(or png...)" alt="yourimage"> </div> </div> ........ </div> </section>

Coming Soon Page (comingsoon.html)

Open comingsoon.js. Just edit date at line 5. Use date format YYYY/MM/DD or YYYY/MM/DD HH:MM:SS

	/*global $, jQuery, Snap, mina*/
	$(document).ready(function () {
   		"use strict";
   		// Countdown
   		$('#timer').countdown('2015/12/31', function (event) { //set date YYYY/MM/DD or YYYY/MM/DD HH:MM:SS
    		var format = "..........";
    		$(this).html(event.strftime(format));
   		});
   		...
	});

For further information about countdown plugin, see The Final Countdown Website.

Location - Google Map

To edit the Google Map style and location marker please open mymap.js in your favorite text editor. Edit the location marker, enter your Address or Latitude and Longitude coordinates.

You can find your Lat and Lng by using this resource: http://www.latlong.net/convert-address-to-lat-long.html

    	
    // ---------------------------------------
    // // GMap 3 - Set Address on line 29
    // ---------------------------------------
     
    var styles = [
        ...
          ];
     
    $("#my-map").gmap3({
        marker:{
          address: '48.871663 , 2.304572'  // < ===  Line 29 HERE SET Coordinates
        },
        map:{
          options:{
              ...
            }
        }
    });

Example with full address:

    	
    // ---------------------------------------
    // // GMap 3 - Set Address on line 29
    // ---------------------------------------
     
    var styles = [
        ...
          ];
     
    $("#my-map").gmap3({
        marker:{
          address: "San Francisco, CA 94107, 795 Folsom Ave"   // Traditional address
        },
        map:{
          options:{
              ...
            }
        }
    });

For further documentation and setting information, see GMap3 Plugin Website.
More useful informations: Google Developers: Google Maps APIs for Web.

Contact Form

This template contains fully working contact form. Forms used:

  1. jQuery Validation Plugin form validation library

  2. script contact.js (must be included before end body tag - see chapter Javascript)

  3. php file: contact-form.php or newsletter-form.php

All you need is replace your actual email address.

In order to receive messages you need to edit line 8 of php/contact-form.php and php/newsletter-form.php file and type in your own email address:

<?php ... // Enter your email address - edit line 8 $to = "your@mail.com"; < === HERE REPLACE YOUR EMAIL ADDRESS ... ?>

Color Filter

Slides with background images using a color filters. If the image is too bright or too dark, or if the font is not visible in the background or for a nicer effect. You can easily customize it as needed.

.video-section::before { content: " "; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Variant 1: bg-color and opacity */ background-color: #999; opacity: 0.5; /* Variant 2: rgba */ background-color: rgba(43, 45, 53, 0.50); }

Credits

Plugins, files, extensions and libraries used in template

Framework

Framework

Fonts

Photos and Mockups
Images are not included in download package

Support

Please feel free to contact us, if you have question or problem about this template.
Guarantee support for HTML and CSS issues. Troubleshooting with javascript and jquery - we will do what we can.

Thank you for purchasing our theme. We look forward to equally successful cooperation in the future!

Your Themekiosk Team